import React from 'react'
import {connect,} from 'react-redux'
import './my-topic.css'
import TabsWithGoBackLayout from "../../layouts/TabsWithGoBackLayout/TabsWithGoBackLayout";
import {Badge} from "antd-mobile";
import MyZans from "./MyZans/MyZans";
import MyComments from "./MyComments/MyComments";
import MyTopics from "./MyTopics/MyTopics";

class MyTopic extends React.Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        const state = this.props.topic.state
        const zan = state[0]
        const comment = state[1]
    }

    formatDate = (date) => {
        const o = new Date(date * 1000)
        const md = o.toLocaleDateString().split('/').slice(1).join('/')
        const time = o.toTimeString().split(' ')[0].slice(0, 5)
        const result = `${md} ${time}`
        return result
    }

    render() {

        const state = this.props.topic.state

        const tabs = [
            // {title: <Badge dot={state[0] > 0}>赞</Badge>},
            // // {title: <Badge dot={false}>公告</Badge>},
            // {title: <Badge dot={state[1] > 0}>评论</Badge>},
            {title: '赞'},
            // {title: <Badge dot={false}>公告</Badge>},
            {title: '评论'},
            {title: '话题',},
        ]

        const history = this.props.history

        return <TabsWithGoBackLayout
            tabs={tabs}
            prefixCls='my-topic-tab'
            history={history}
            animated={false}
            tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
        >

            <MyZans formatDate={this.formatDate}/>
            <MyComments formatDate={this.formatDate}/>
            <MyTopics formatDate={this.formatDate} />
            {/*<MyComments />*/}
            {/*<MyTopics />*/}

        </TabsWithGoBackLayout>
    }

}

const mapState = state => ({
    user: state.user,
    topic: state.topic,
})

export default connect(mapState)(MyTopic)
